<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="./bootstrap-fileinput/css/fileinput.min.css" />
    <script src="./bootstrap-fileinput/js/fileinput.min.js"></script>
    <script src="./bootstrap-fileinput/js/locales/zh.js"></script>
</head>

<body>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            <li class="fa fa-remove"></li>
        </button>
        <h5 class="modal-title">Excel文件上传</h5>
    </div>
    <div class="modal-body">
        <form id="importFile" name="importFile" class="form-horizontal" method="post" enctype="multipart/form-data">
            <div class="box-body">
                <div>
                    <label class="control-label">请选择要导入的Excel文件：</label>
                    <input id="excelFile" name="excelFile" class="file-loading" type="file" multiple accept=".xls,.xlsx"> <br>
                </div>
            </div>
        </form>
    </div>
</body>
<script>
    initUpload("excelFile", "./text");

    function initUpload(ctrlName, uploadUrl) {
        var control = $('#' + ctrlName);
        control.fileinput({
            language: 'zh', //设置语言
            uploadUrl: uploadUrl, //上传的地址
            uploadAsync: true, //默认异步上传
            showCaption: true, //是否显示标题
            showUpload: true, //是否显示上传按钮
            browseClass: "btn btn-primary", //按钮样式
            allowedFileExtensions: ["xls", "xlsx"], //接收的文件后缀
            maxFileCount: 10, //最大上传文件数限制
            previewFileIcon: '<i class="glyphicon glyphicon-file"></i>',
            showPreview: true, //是否显示预览
            previewFileIconSettings: {
                'docx': '<i ass="fa fa-file-word-o text-primary"></i>',
                'xlsx': '<i class="fa fa-file-excel-o text-success"></i>',
                'xls': '<i class="fa fa-file-excel-o text-success"></i>',
                'pptx': '<i class="fa fa-file-powerpoint-o text-danger"></i>',
                'jpg': '<i class="fa fa-file-photo-o text-warning"></i>',
                'pdf': '<i class="fa fa-file-archive-o text-muted"></i>',
                'zip': '<i class="fa fa-file-archive-o text-muted"></i>',
            },
            uploadExtraData: function() {
                var extraValue = "test";
                return {
                    "excelType": extraValue
                };
            }
        });
    }
    $("#excelFile").on("fileuploaded", function(event, data, previewId, index) {
        console.log(data);
        if (data.response.success == true) {
            alert(data.files[index].name + "上传成功!");
            //关闭
            $(".close").click();
        } else {
            alert(data.files[index].name + "上传失败!" + data.response.message);
            //重置
            $("#excelFile").fileinput("clear");
            $("#excelFile").fileinput("reset");
            $('#excelFile').fileinput('refresh');
            $('#excelFile').fileinput('enable');
        }
    });
</script>

</html>